<template>
  <div>
    <pageHeader></pageHeader>
    <div style="width: 1200px;margin: 0 auto">
      <div style="display: flex;margin-bottom: 15px;">
        <div class="menuSelect" @click="btnBack()">首页</div>
        <div style="margin-left: 30px;" :class="active == 0 ? 'menuSelected' : 'menuSelect'"
             @click="radioTypeChange(0)">
          活动报备
        </div>
        <div style="margin-left: 30px;" :class="active == 1 ? 'menuSelected' : 'menuSelect'"
             @click="radioTypeChange(1)">
          活动记录
        </div>
        <div style="margin-left: 30px;" :class="active == 2 ? 'menuSelected' : 'menuSelect'"
             @click="radioTypeChange(2)">
          表彰记录
        </div>
        <div style="margin-left: 30px;" :class="active == 3 ? 'menuSelected' : 'menuSelect'"
             @click="radioTypeChange(3)">
          宣传报道
        </div>
      </div>

      <el-card v-if="active == 0" style="width: 100%;margin-top: 10px;max-height: 70vh;min-height: 50vh; overflow: auto;scrollbar-width: none;">
        <el-row>
          <el-col :span="16" style="font-size: 20px;">{{ userName }}-活动报备记录</el-col>
          <el-col :span="8" style="text-align: right;">
            <el-button type="primary" @click="reportDialog = true;">活动报备</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }"
                      :data="reportData" border size="small" style="cursor: pointer;">
              <el-table-column type="index" label="序号" align="center" width="60" />
              <el-table-column prop="activityName" label="活动名称" align="center" width="160" />
              <el-table-column prop="activityName" label="是否开展" align="center" width="100" >
                  <template #default="scope">
                    <span style="color: #289CFF;" v-if="getIsActivity(scope.row.activityName)">已开展</span>
                    <span style="color: red;" v-if="!getIsActivity(scope.row.activityName)">已开展</span>
                  </template>
              </el-table-column>
              <el-table-column prop="activityFormat" label="活动方式" align="center" width="100">
                <template #default="scope">
                  <span>{{ activityFormatStr(scope.row.activityFormat) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="activityType" label="活动类型" align="center" width="140">
                <template #default="scope">
                  <span>{{ activityTypeStr(scope.row.activityType) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="participantsNumber" label="参与人数" align="center" width="140" />
              <el-table-column prop="activityIntroduction" label="活动简介" align="center" width="280">
                <template #default="scope">
                  <el-popover placement="top-start" :title="scope.row.activityName" :width="600" trigger="hover"
                              :content="scope.row.activityIntroduction">
                    <template #reference>
                      {{ setContent(scope.row.activityIntroduction) }}
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="charge" label="经费来源" align="center" width="140">
                <template #default="scope">
                  <span>{{ getCharge(scope.row.charge) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="expenditure" label="支出情况" align="center" width="140">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" align="center" width="160" />
              <el-table-column prop="endTime" label="结束时间" align="center" width="160" />

              <el-table-column prop="place" label="地点" align="center" width="250" />
              <el-table-column fixed="right" label="操作" width="180" align="center">
                <template #default="scope">
                  <div style="background: white;">

                    <el-button v-if="!getIsActivity(scope.row.activityName)"
                               @click="handleReportByActivity(scope.row)" type="text">确认开展
                    </el-button>
                    <el-button @click="handleReportDelete(scope.row.id)" type="text">删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-if="active == 1" style="width: 100%;margin-top: 10px;max-height: 70vh;min-height: 50vh; overflow: auto;scrollbar-width: none;">
        <el-row style="width: 100%;">
          <el-col :span="18" style="font-size: 20px;">{{ userName }}-活动开展记录</el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button type="primary" @click="add()">活动上传</el-button>
          </el-col>
        </el-row>
        <el-form style="margin-top: 10px;" :model="activitySelectForm" ref="activitySelectForm" label-position="left"
                 label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item prop="activityName" label="活动名称">
                <el-input class="custom-input" v-model="activitySelectForm.activityName" placeholder="请输入活动名称"
                          style="width: 90%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="activityType" label="活动类型">
                <el-select clearable v-model="activitySelectForm.activityType" filterable placeholder="请选择"
                           style="width: 90%;">
                  <el-option v-for="dict in activityTypeOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="startTime" label="开始时间">
                <el-date-picker v-model="activitySelectForm.startTime" style="width: 90%;" value-format="YYYY-MM-DD"
                                type="date" placeholder="活动开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="endTime" label="结束时间">
                <el-date-picker style="width: 90%;" v-model="activitySelectForm.endTime" value-format="YYYY-MM-DD"
                                type="date" placeholder="活动开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-search" @click="selectActivity">查询</el-button>
              <el-button @click="clearActivity">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-col :span="24" style="margin-top: 10px;">
          <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }"
                    :data="activityData" border size="small" style="cursor: pointer;">
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="activityName" label="活动名称" align="center" width="160" />
            <el-table-column prop="approvalResultName" label="审批结果" align="center" width="120">
              <template #default="scope">
                <el-tag type="warning" v-show="scope.row.approvalResult == null">审批中</el-tag>
                <el-tag type="warning" v-show="scope.row.approvalResult == 0">审批中</el-tag>
                <el-tag type="success" v-show="scope.row.approvalResult == 1">审批通过</el-tag>
                <el-tag type="danger" @click="approvalReamrk(scope.row.remark)"
                        v-show="scope.row.approvalResult == 2">审批不通过
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="activityFormat" label="活动方式" align="center" width="140">
              <template #default="scope">
                <span>{{ activityFormatStr(scope.row.activityFormat) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="activityType" label="活动类型" align="center" width="140">
              <template #default="scope">
                <span>{{ activityTypeStr(scope.row.activityType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="participantsNumber" label="参与人数" align="center" width="140" />
            <el-table-column prop="activityIntroduction" label="活动简介" align="center" width="240">
              <template #default="scope">
                <el-popover placement="top-start" :title="scope.row.activityName" :width="600" trigger="hover"
                            :content="scope.row.activityIntroduction">
                  <template #reference>
                    {{ setContent(scope.row.activityIntroduction) }}
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="charge" label="经费来源" align="center" width="140">
              <template #default="scope">
                <span>{{ getCharge(scope.row.charge) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="expenditure" label="支出情况" align="center" width="140">
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center" width="160" />
            <el-table-column prop="endTime" label="结束时间" align="center" width="160" />
            <el-table-column prop="place" label="地点" align="center" width="250" />
            <el-table-column fixed="right" label="操作" width="110" align="center">
              <template #default="scope">
                <el-dropdown>
                  <el-button type="text" :icon="Document">更多操作</el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleImageClick(scope.row.imgFileUrl)">图片</el-dropdown-item>
                      <el-dropdown-item @click="handleVideoClick(scope.row.mpFileUrl)">视频</el-dropdown-item>
                      <el-dropdown-item @click="handleDocumentClick(scope.row.wdFileUrl)">文档</el-dropdown-item>
                      <el-dropdown-item v-if="scope.row.approvalResult == 1" @click="handleCodeClick(scope.row.id)">
                        二维码
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleRevoke(scope.$index)">
                        {{ scope.row.cancelStatus == 0 ? '撤销' : '启用' }}
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleUpdate(scope.row)"
                                        v-if="scope.row.approvalResult == null || scope.row.approvalResult == 0">修改
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleDelete(scope.$index)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-card>
      <el-card v-if="active == 2" style="width: 100%;margin-top: 10px;max-height: 70vh;min-height: 50vh; overflow: auto;scrollbar-width: none;">
        <el-row style="width: 100%;">
          <el-col :span="18" style="font-size: 20px;">{{ userName }}-获得表彰记录</el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button type="primary" @click="addAwardInfo()">获奖表彰上报</el-button>
          </el-col>
        </el-row>
        <el-form size="default" :model="awardQuery" ref="awardQueryRef" label-width="60px" style="margin-top: 10px;margin-bottom: 10px;">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="级别" prop="level">
                <el-select v-model="awardQuery.level" placeholder="请选择" clearable>
                  <el-option v-for="item in awardLevelOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="标题" prop="title">
                <el-input v-model="awardQuery.title" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="年份" prop="examineYear">
                <el-date-picker v-model="awardQuery.examineYear" style="width: 100%;" value-format="YYYY"
                                type="year" placeholder="请选择年份">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="getListAward">查询</el-button>
              <el-button @click="clearAwardQuery">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table  :header-cell-style="{ background: '#F0F5FA', color: '#333333' }"
                  :data="listAward" border size="small" style="cursor: pointer;margin-top: 10px;">

          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="title" label="获奖表彰标题" align="center" :show-overflow-tooltip="true" />
<!--          <el-table-column prop="type" label="获奖表彰类型" align="center">-->
<!--            <template #default="scope">-->
<!--              <span>{{ awardFormatType(scope.row.type) }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="level" label="获奖表彰级别" align="center" width="120">
            <template #default="scope">
              <span>{{ awardFormatLevel(scope.row.level) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="获奖图片" align="center" width="140">
            <template #default="scope">
              <el-image
                v-if="scope.row.imgUrl"
                ref="imageRef"
                preview-teleported
                style="width: 40px; height: 40px"
                :src="getAwardImage(scope.row.imgUrl)"
                :preview-src-list="getAwardImages(scope.row.imgUrl)"
                fit="cover"
              />
              <span v-if="!scope.row.imgUrl"></span>
            </template>
          </el-table-column>
          <el-table-column prop="getTime" label="获得时间" align="center" width="120"/>
          <el-table-column prop="content" label="获奖表彰内容" align="center" :show-overflow-tooltip="true" />
          <el-table-column fixed="right" label="操作" width="110" align="center">
            <template #default="scope">
              <el-dropdown>
                <el-button type="text" :icon="Document">更多操作</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleAwardInfo(scope.row)">详情</el-dropdown-item>
                    <el-dropdown-item @click="handleAwardEdit(scope.row)">修改</el-dropdown-item>
                    <el-dropdown-item @click="handleAwardDelete(scope.row.id)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
      <el-card v-if="active == 3" style="width: 100%;margin-top: 10px;max-height: 70vh;min-height: 50vh; overflow: auto;scrollbar-width: none;">
        <el-row style="width: 100%;">
          <el-col :span="18" style="font-size: 20px;">{{ userName }}-宣传报道记录</el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button type="primary" @click="addAwardInfo()">宣传报道上传</el-button>
          </el-col>
        </el-row>
        <el-form size="default" :model="awardQuery" ref="awardQueryRef" label-width="60px" style="margin-top: 10px;margin-bottom: 10px;">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="级别" prop="level">
                <el-select v-model="awardQuery.level" placeholder="请选择" clearable>
                  <el-option v-for="item in awardRecordOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="标题" prop="title">
                <el-input v-model="awardQuery.title" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="年份" prop="examineYear">
                <el-date-picker v-model="awardQuery.examineYear" style="width: 100%;" value-format="YYYY"
                                type="year" placeholder="请选择年份">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="getListAward">查询</el-button>
              <el-button @click="clearAwardQuery">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table  :header-cell-style="{ background: '#F0F5FA', color: '#333333' }"
                   :data="listAward" border size="small" style="cursor: pointer;margin-top: 10px;">

          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="title" label="宣传报道标题" align="center" :show-overflow-tooltip="true" />
<!--          <el-table-column prop="type" label="获奖表彰类型" align="center" width="120">-->
<!--            <template #default="scope">-->
<!--              <span>{{ awardFormatType(scope.row.type) }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="level" label="宣传报道级别" align="center" width="120">
            <template #default="scope">
              <span>{{ reportFormatLevel(scope.row.level) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="mediaCoverage" label="媒体" align="center" />
          <el-table-column prop="level" label="获奖图片" align="center" width="120">
            <template #default="scope">
              <el-image
                v-if="scope.row.imgUrl"
                ref="imageRef"
                preview-teleported
                style="width: 40px; height: 40px"
                :src="getAwardImage(scope.row.imgUrl)"
                :preview-src-list="getAwardImages(scope.row.imgUrl)"
                fit="cover"
              />
              <span v-if="!scope.row.imgUrl"></span>
            </template>
          </el-table-column>
          <el-table-column prop="getTime" label="报道时间" align="center" width="120"/>
          <el-table-column prop="content" label="宣传报道内容" align="center" :show-overflow-tooltip="true" />
          <el-table-column fixed="right" label="操作" width="110" align="center">
            <template #default="scope">
              <el-dropdown>
                <el-button type="text" :icon="Document">更多操作</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleAwardInfo(scope.row)">详情</el-dropdown-item>
                    <el-dropdown-item @click="handleAwardEdit(scope.row)">修改</el-dropdown-item>
                    <el-dropdown-item @click="handleAwardDelete(scope.row.id)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </div>
    <pageFooter></pageFooter>
    <el-dialog title="活动报备" v-model="reportDialog" width="50%" :close-on-click-modal="false">
      <el-form size="default" :model="reportForm" ref="reportFormRef" :rules="reportRules" label-width="80px"
               label-position="right">
        <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动名称" prop="activityName">
              <el-input v-model="reportForm.activityName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="参与人数" prop="participantsNumber">
              <el-input type="number" v-model="reportForm.participantsNumber" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="支出情况" prop="expenditure">
              <!--              <el-select clearable style="width: 100%;" v-model="reportForm.expenditure" placeholder="请选择">-->
              <!--                <el-option v-for="dict in youOptions" :key="dict.id" :label="dict.name" :value="dict.id" />-->
              <!--              </el-select>-->
              <el-input type="number" v-model="reportForm.expenditure" placeholder="请输入">
                <template #append>
                  元
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="经费来源" prop="charge">
              <el-select clearable style="width: 100%;" v-model="reportForm.charge" placeholder="请选择">
                <el-option v-for="dict in activityChargeTypeOptions" :key="dict.id" :label="dict.name"
                           :value="dict.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动类型" prop="activityType">
              <el-select clearable style="width:100%;" v-model="reportForm.activityType" placeholder="请选择活动类型">
                <el-option v-for="item in activityTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动方式" prop="activityFormat">
              <el-select :popper-append-to-body="false" clearable style="width:100%;"
                         v-model="reportForm.activityFormat" placeholder="请选择活动进行方式">
                <el-option v-for="item in activityOngoingOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker class="date-piker" style="width: 100%;" v-model="reportForm.startTime" type="datetime"
                              value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker style="width: 100%;" v-model="reportForm.endTime" value-format="YYYY-MM-DD HH:mm:ss"
                              type="datetime" placeholder="活动结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="19" style="margin-bottom: 15px;">
            <el-form-item label="活动地点" prop="place">
              <el-input v-model="reportForm.place" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin-bottom: 15px;">
            <el-button type="primary" @click="mapOpen = true">选择活动地点</el-button>
          </el-col>
          <el-col :span="24" style="margin-bottom: 15px;">
            <el-form-item label="活动简介" prop="activityIntroduction">
              <el-input type="textarea" v-model="reportForm.activityIntroduction" :rows="5" maxlength="2000" placeholder="请输入"  show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动附件">
              <el-upload v-model="reportFiles" :file-list="reportFileList" name="file" :action="uploadUrl"
                         :on-success="handleReportSuccess"
                         :limit="5" multiple
                         :before-upload="handleReportBeforeUpload" :on-exceed="handleReportExceed"
                         :headers="headers"
                         :before-remove="handleReportBeforeRemove"
                         accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.mp4">
                <div class="up-btn-box">
                  <el-icon size="20">
                    <UploadFilled />
                  </el-icon>
                  <span class="upload-title">上传活动报备附件</span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: right;width: 100%;">
        <el-button @click="reportDialog = false">取 消</el-button>
        <el-button type="primary" @click="insertReport()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="活动上报" v-model="addActivityDialog" width="50%" :close-on-click-modal="false">
      <el-form size="default" :model="activityForm" ref="activityFormRef" :rules="postRules" label-width="80px"
               label-position="right">
        <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动名称" prop="activityName">
              <el-input v-model="activityForm.activityName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="参与人数" prop="participantsNumber">
              <el-input type="number" v-model="activityForm.participantsNumber" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="支出情况" prop="expenditure">
              <el-input type="number" v-model="activityForm.expenditure" placeholder="请输入">
                <template #append>
                  元
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="经费来源" prop="charge">
              <el-select clearable style="width: 100%;" v-model="activityForm.charge" placeholder="请选择">
                <el-option v-for="dict in activityChargeTypeOptions" :key="dict.id" :label="dict.name"
                           :value="dict.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动类型" prop="activityType">
              <el-select clearable style="width:100%;" v-model="activityForm.activityType" placeholder="请选择活动类型">
                <el-option v-for="item in activityTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="活动方式" prop="activityFormat">
              <el-select :popper-append-to-body="false" clearable style="width:100%;"
                         v-model="activityForm.activityFormat" placeholder="请选择活动进行方式">
                <el-option v-for="item in activityOngoingOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker class="date-piker" style="width: 100%;" v-model="activityForm.startTime" type="datetime"
                              value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-bottom: 15px;">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker style="width: 100%;" v-model="activityForm.endTime" value-format="YYYY-MM-DD HH:mm:ss"
                              type="datetime" placeholder="活动结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="19" style="margin-bottom: 15px;">
            <el-form-item label="活动地点" prop="place">
              <el-input v-model="activityForm.place" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin-bottom: 15px;">
            <el-button type="primary" @click="mapOpen = true">选择活动地点</el-button>
          </el-col>
          <el-col :span="24" style="margin-bottom: 15px;">
            <el-form-item label="活动简介" prop="activityIntroduction">
              <el-input type="textarea" v-model="activityForm.activityIntroduction" :rows="5" maxlength="2000" placeholder="请输入"  show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <!--          list-type="picture-card"-->
          <el-col :span="24">
            <el-form-item label="活动图片">
              <el-upload v-model="imageFiles" :file-list="imageFileList" name="file" :action="uploadUrl"
                         :on-success="handleImageSuccess"
                         :limit="10" accept=".png,.jpg,.jpeg" :before-upload="handleImageBeforeUpload" multiple
                         :on-exceed="handleImageExceed" :headers="headers" :before-remove="handleImageBeforeRemove"
              >
                <div class="up-btn-box">
                  <el-icon size="20">
                    <UploadFilled />
                  </el-icon>
                  <span class="upload-title">上传活动照片</span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动视频">
              <el-upload v-model="files" :file-list="fileList" name="file" :action="uploadUrl"
                         :on-success="handleSuccess" :limit="1"
                         accept=".mp4"
                         :before-upload="handleBeforeUpload" :on-exceed="handleExceed" :headers="headers"
                         :before-remove="handleBeforeRemove">
                <div class="up-btn-box">
                  <el-icon size="20">
                    <UploadFilled />
                  </el-icon>
                  <span class="upload-title">上传活动视频</span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动文档">
              <el-upload v-model="documentFiles" :file-list="documentFileList" name="file" :action="uploadUrl"
                         :on-success="handleDocumentSuccess"
                         :limit="5" multiple
                         :before-upload="handleDocumentBeforeUpload" :on-exceed="handleDocumentExceed"
                         :headers="headers"
                         :before-remove="handleDocumentBeforeRemove"
                         accept=".doc,.docx,.xls,.xlsx,.pdf">
                <div class="up-btn-box">
                  <el-icon size="20">
                    <UploadFilled />
                  </el-icon>
                  <span class="upload-title">上传活动文档</span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: right;width: 100%;">
        <el-button @click="addActivityDialog = false">取 消</el-button>
        <el-button type="primary" @click="insertActivity()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dialogTitle" v-model="activityFileDialog" width="460px">
      <el-image style="width: 400px; height: 400px" :src="showUrl" fit="fill">
      </el-image>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="margin-top: 20px;" type="primary" @click="saveImage()">保存</el-button>
      </div>
    </el-dialog>
    <el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="srcList" />
  </div>
  <el-dialog v-model="mapOpen" title="选择位置" width="65%" append-to-body :show-close="false" :close-on-click-modal="false">
    <el-row>
      <el-col :span="24">
        <div style="width:100%;height: 600px">
          <tMap  @setPosition="setPosition" @setAddress="setAddress" @closeMapaddressDialog="closeMapaddressDialog"></tMap>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
  <el-dialog :title="awardTitle" v-model="awardDialog" width="1000px" append-to-body :close-on-click-modal="false">
    <el-form size="default" :model="awardForm" ref="awardFormRef" :rules="awardRules" label-width="80px"
             label-position="right">
      <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="事件标题" prop="title">
            <el-input v-model="awardForm.title" placeholder="请输入事件标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="事件日期" prop="getTime">
            <el-date-picker v-model="awardForm.getTime" style="width: 100%;" value-format="YYYY-MM-DD"
                            type="date" placeholder="请选择事件日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12" style="margin-bottom: 15px;">-->
<!--          <el-form-item label="事件类型" prop="type">-->
<!--            <el-select :popper-append-to-body="false" clearable style="width:100%;" disabled-->
<!--                       v-model="awardForm.type" placeholder="请选择事件类型">-->
<!--              <el-option v-for="item in awardTypeOptions" :key="item.id" :label="item.name" :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12" style="margin-bottom: 15px;" v-if="active == 2">
          <el-form-item label="事件级别" prop="level">
            <el-select :popper-append-to-body="false" clearable style="width:100%;"
                       v-model="awardForm.level" placeholder="请选择获奖表彰级别">
              <el-option v-for="item in awardLevelOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;" v-if="active == 3">
          <el-form-item label="事件级别" prop="level">
            <el-select :popper-append-to-body="false" clearable style="width:100%;"
                       v-model="awardForm.level" placeholder="请选择事件级别">
              <el-option v-for="item in awardRecordOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;" v-if="active == 3">
          <el-form-item label="报道媒体" prop="level">
            <el-input v-model="awardForm.mediaCoverage" placeholder="请输入报道媒体"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-bottom: 15px;">
          <el-form-item label="事件内容" prop="content">
            <el-input :rows="3" type="textarea" v-model="awardForm.content"
                      placeholder="请输入获奖、表彰内容说明..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传照片">
            <el-upload v-model="awardFiles" :file-list="awardFileList" name="file" :action="uploadUrl"
                       :on-success="handleAwardSuccess"
                       :limit="5" accept=".png,.jpg,.jpeg" :before-upload="handleAwardBeforeUpload" multiple
                       :on-exceed="handleAwardExceed" :headers="headers" :before-remove="handleAwardBeforeRemove"
            >
              <div class="up-btn-box">
                <el-icon size="20">
                  <UploadFilled />
                </el-icon>
                <span class="upload-title">选择图片</span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传视频">
            <el-upload v-model="awardVideoFiles" :file-list="awardVideoFileList" name="file" :action="uploadUrl"
                       :on-success="handleAwardVideoSuccess"
                       :limit="3" accept=".mp4,.mkv" :before-upload="handleAwardVideoBeforeUpload" multiple
                       :on-exceed="handleAwardVideoExceed" :headers="headers" :before-remove="handleAwardVideoBeforeRemove"
            >
              <div class="up-btn-box">
                <el-icon size="20">
                  <UploadFilled />
                </el-icon>
                <span class="upload-title">选择视频</span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>

        <div slot="footer" style="text-align: right;width: 100%;">
          <el-button @click="awardDialog = false">取 消</el-button>
          <el-button type="primary" @click="insertAward()">确 定</el-button>
        </div>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog v-model="infoDialog" title="详情" width="70%" >
      <AwardInfo :infoDetails="infoDetails"></AwardInfo>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoDialog = false">关  闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  addHuoDong,
  activityReport,
  createQrCodeUrl,
  deleteActivity,
  getActivityList,
  cancelActivity, editActivity, addAward, editAward, getAwardList, delAward, delActivityReport
} from '@/views/yearCheck/ykb/otherApi'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { getDictByCode } from '@/views/yearCheck/ykb/mf/mf'
import db from '@/storage'
import { wrapperLoadViteEnv } from '~/build/utils'
import { useUserStore } from '@/store'
import { Plus, Download, Upload, UploadFilled, Document } from '@element-plus/icons-vue'
import pageHeader from '@/views/yearCheck/ykb/other/pageheader.vue'
import pageFooter from '@/views/yearCheck/ykb/other/pagefooter.vue'
import AwardInfo from '@/views/evaluate/report/awardInfo.vue'
import { saveAs } from 'file-saver'
import tMap from './tMap.vue'
import { getListReport } from '@/api/evaluate/activite'

export default {
  computed: {
    Document() {
      return Document
    }
  },
  components: { Plus, pageHeader, pageFooter, Download, Upload, UploadFilled,tMap,AwardInfo },
  data() {
    return {
      active:0,
      testFile: undefined,
      mapOpen: false,
      youOptions: [{ id: 1, name: '有' }, { id: 2, name: '无' }],
      showImagePreview: false,
      srcList: [],
      dialogTitle: '活动图片',
      activityTypeOptions: undefined,
      activityOngoingOptions: undefined,
      activityChargeTypeOptions: undefined,
      awardTypeOptions:[{id:"1",name:'表彰'},{id:"2",name:'宣传报道'}],
      awardLevelOptions: undefined,
      awardRecordOptions:undefined,
      files: [],
      fileList: [],
      documentFiles: [],
      reportFiles: [],
      imageFiles: [],
      awardFiles: [],
      awardVideoFiles:[],
      documentFileList: [],
      reportFileList: [],
      imageFileList: [],
      awardFileList: [],
      awardVideoFileList: [],
      activityFileDialog: false,
      showUrl: undefined,
      uploadUrl: undefined,
      headers: null,
      activitySelectForm: {
        pageNum: 1,
        pageSize: 1000,
        socialCode: localStorage.getItem('creditCode'),
        startTime: undefined,
        endTime: undefined,
        activityName: undefined,
        activityType: undefined
      },
      awardQuery:{
        socialCode: localStorage.getItem('creditCode'),
        pageNum: '1',
        pageSize: '1000',
        type: undefined,
        title:undefined,
        leval:undefined,
        examineYear:undefined
      },
      awardForm: {
        title: undefined,
        content: undefined,
        getTime: undefined,
        id: undefined,
        imgUrl: undefined,
        level: undefined,
        remark: undefined,
        socialCode: undefined,
        type: undefined,
        mediaCoverage:undefined
      },
      awardRules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        getTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        level: [{ required: true, message: '请选择', trigger: 'blur' }],
        type: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      postRules: {
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        participantsNumber: [{ required: true, message: '请输入参与人数', trigger: 'blur' }],
        expenditure: [{ required: true, message: '请输入支出情况', trigger: 'blur' }],
        charge: [{ required: true, message: '请选择', trigger: 'blur' }],
        activityType: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
        // activityFormat: [{ required: true, message: '请选择活动方式', trigger: 'change' }],
        // startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        // endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        place: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
        activityIntroduction: [{ required: true, message: '请输入活动简介，至少100字', trigger: 'blur',min:100,max:2000 }],
      },
      reportRules: {
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        participantsNumber: [{ required: true, message: '请输入参与人数', trigger: 'blur' }],
        expenditure: [{ required: true, message: '请输入支出情况', trigger: 'blur' }],
        charge: [{ required: true, message: '请选择', trigger: 'change' }],
        activityType: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
        place: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
        activityIntroduction: [{ required: true, message: '请输入活动简介,至少100字', trigger: 'blur',min:100,max:2000 }]
      },

      activityForm: {
        activityFormat: '',//活动进行方式
        activityIntroduction: '',//活动简介
        activityName: '',//活动名称
        activityType: '',//($int32)活动类型
        approvalResult: '',//($int32)审批结果(0：未审批；1：审批通过；2审批未通过)
        charge: '',//经费来源
        createBy: '',//
        createTime: '',//($date-time)
        endTime: '',//($date-time)结束时间 yyyy-MM-dd
        expenditure: '',//支出情况
        id: undefined,//
        imgFileUrl: '',//附件路径
        isDeleted: '',//($int32)是否删除：0-否、1-是
        likes: '',//点赞数
        mpFileUrl: '',//附件路径
        participantsNumber: '',//($int32)参与人数
        place: '',//地点
        remark: '',//
        socialCode: '',//社会组织编码
        startTime: '',//($date-time)开始时间 yyyy-MM-dd,
        imgFileName: '',
        mpFileName: '',
        wdFileUrl: '',
        latAndLon: ''
      },
      reportForm: {
        fjFileUrl: '',
        activityFormat: '',//活动进行方式
        activityIntroduction: '',//活动简介
        activityName: '',//活动名称
        activityType: '',//($int32)活动类型
        approvalResult: '',//($int32)审批结果(0：未审批；1：审批通过；2审批未通过)
        charge: '',//经费来源
        createBy: '',//
        createTime: '',//($date-time)
        endTime: '',//($date-time)结束时间 yyyy-MM-dd
        expenditure: '',//支出情况
        id: '',//
        imgFileUrl: '',//附件路径
        isDeleted: '',//($int32)是否删除：0-否、1-是
        likes: '',//点赞数
        mpFileUrl: '',//附件路径
        participantsNumber: '',//($int32)参与人数
        place: '',//地点
        remark: '',//
        socialCode: '',//社会组织编码
        startTime: '',//($date-time)开始时间 yyyy-MM-dd,
        imgFileName: '',
        mpFileName: '',
        latAndLon: ''
      },
      activityData: undefined,
      addActivityDialog: false,
      awardDialog: false,
      awardTitle: '新增',
      infoDetails: undefined,
      infoDialog:undefined,
      reportDialog: false,
      userName: undefined,
      userInfo: undefined,
      reportData: [],
      reportDataTotal: [],
      listAward: []
    }
  },
  created() {
    const userStore = useUserStore()
    this.userInfo = userStore.userInfo
    console.log(this.userInfo)
    this.userName = this.userInfo.userName
    localStorage.setItem('creditCode', this.userInfo.workNo)
    localStorage.setItem('examineYear', this.userInfo.year)
    // localStorage.setItem('examineYear', '2023')
    this.addActivity()

  },
  mounted() {
    this.initScreen()
    window.onresize = () => {
      return (() => {
        this.initScreen()
      })()
    }
  },

  methods: {
    handleAwardDelete(id) {
      ElMessageBox.confirm(
        '是否删除此记录?',
        '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          delAward(id).then(response => {
            console.log(response)
            this.$message({
              message: '删除成功！',
              type: 'warning'
            })
            this.getListAward()
          })
        })
        .catch(() => {
        })
    },
    handleAwardInfo(row){
      this.infoDetails = row;
      this.infoDialog = true;
    },
    handleAwardEdit(row) {
      if(this.active == 2){
        this.awardTitle = '修改获奖表彰'
      }else if (this.active == 2){
        this.awardTitle = '修改宣传报道'
      }
      this.awardForm = { ...row }
      if(row.imgUrl){
        this.awardFileList = JSON.parse(row.imgUrl)
        this.awardFiles = this.getAwardImages(row.imgUrl)
      }else{
        this.awardFiles = []
        this.awardFileList = []
      }
      if(row.mpUrl){
        this.awardVideoFileList = JSON.parse(row.mpUrl)
        this.awardVideoFiles = this.getAwardImages(row.mpUrl)
      }else{
        this.awardVideoFiles = []
        this.awardVideoFileList = []
      }
      this.awardDialog = true
    },
    getAwardImage(str) {
      if(str){
        let images = JSON.parse(str)
        return images[0].response.data
      }
    },
    getAwardImages(str) {
     if(str){
       let images = JSON.parse(str)
       let imageUrls = []
       for (let i = 0; i < images.length; i++) {
         imageUrls.push(images[i].response.data)
       }
       return imageUrls
     }
    },
    handleReportByActivity(row) {
      this.activityForm = { ...row }
      this.activityForm.id = ''
      this.activityForm.activityType += ''
      this.activityForm.charge += ''
      this.addActivityDialog = true
    },
    setPosition(val) {
      console.log('这是 获取经纬度 val', val)
      if (this.reportDialog) {
        this.reportForm.latAndLon = JSON.stringify(val)
      } else {
        this.activityForm.latAndLon = JSON.stringify(val)
      }
      this.mapOpen = false
    },
    setAddress(val) {
      console.log('这是 获取详细地址 val', val)
      if (this.reportDialog) {
        this.reportForm.place = val
      } else {
        this.activityForm.place = val
      }
      this.mapOpen = false
    },
    closeMapaddressDialog() {
      this.mapOpen = false
    },
    initScreen() {
      const winWidth = window.innerWidth
      const size = winWidth / 1920
      if (winWidth > 768 && winWidth < 1850) {
        document.body.style.zoom = size //放大缩小相应倍数
      }
    },
    closePreview() {
      this.showImagePreview = false
    },
    activityFormatStr(str) {
      for (let i = 0; i < this.activityOngoingOptions.length; i++) {
        if (this.activityOngoingOptions[i].id == str) {
          return this.activityOngoingOptions[i].name
        }
      }
      return str
    },
    reportFormatLevel(str) {
      for (let i = 0; i < this.awardRecordOptions.length; i++) {
        if (this.awardRecordOptions[i].id == str) {
          return this.awardRecordOptions[i].name
        }
      }
      return str
    },
    awardFormatLevel(str) {
      for (let i = 0; i < this.awardLevelOptions.length; i++) {
        if (this.awardLevelOptions[i].id == str) {
          return this.awardLevelOptions[i].name
        }
      }
      return str
    },
    awardFormatType(str) {
      console.log(str)
      for (let i = 0; i < this.awardTypeOptions.length; i++) {
        if (this.awardTypeOptions[i].id == str) {
          return this.awardTypeOptions[i].name
        }
      }
      return str
    },
    activityTypeStr(str) {
      for (let i = 0; i < this.activityTypeOptions.length; i++) {
        if (this.activityTypeOptions[i].id == str) {
          return this.activityTypeOptions[i].name
        }
      }
      return str
    },
    handleBack() {
      window.history.back()
    },
    saveImage() {
      console.log(this.showUrl)
      saveAs(this.showUrl, '活动二维码.png')
    },
    getIsActivity(name) {
      for (let i = 0; i < this.activityData.length; i++) {
        if (this.activityData[i].activityName == name) {
          return true
        }
      }
      return false
    },
    selectActivity() {
      this.activitySelectForm.socialCode = localStorage.getItem('creditCode')
      getActivityList(this.activitySelectForm).then(response => {
        this.activityData = response.data.rows
        this.getReportList()
      })
    },
    getReportList() {
      getListReport({ pageSize: 1000, pageNum: 1, createBy: 0 }).then(res => {
        this.reportData = res.data.rows
      })
    },
    clearActivity() {
      this.activitySelectForm = {
        pageNum: 1,
        pageSize: 1000,
        startTime: undefined,
        endTime: undefined,
        activityName: undefined,
        activityType: undefined,
        socialCode: localStorage.getItem('creditCode')
      },
        this.selectActivity()
    },
    insertReport() {
      console.log(this.reportFileList)
      console.log(this.reportFiles)
      if (this.reportFiles.length == 0) {
        this.$message({
          message: '请上传一份活动报备文件！',
          type: 'error'
        })
        return
      }
      this.reportForm.fjFileUrl = JSON.stringify(this.reportFiles)
      this.reportForm.socialCode = localStorage.getItem('creditCode')
      this.$refs.reportFormRef.validate(valid => {
        if (valid) {
          console.log(this.reportForm)
          activityReport(this.reportForm).then(response => {
            console.log(response.data)
            if (response.code == 200) {
              this.$message({
                message: '活动报备成功！',
                type: 'success'
              })
              this.getReportList()
              this.reportDialog = false
            }
          })

        } else {
          this.$message({
            message: '请填写完整！',
            type: 'error'
          })
        }
      })
    },
    add() {
      this.addActivityDialog = true
      this.clearAddDialog()
    },
    addAwardInfo() {
      this.awardForm = {
        title: undefined,
        content: undefined,
        getTime: undefined,
        id: undefined,
        imgUrl: undefined,
        level: undefined,
        remark: undefined,
        socialCode: undefined,
        type: undefined
      }
      this.awardFileList = []
      this.awardFiles = []
      this.awardVideoFileList = []
      this.awardVideoFiles = []
      if(this.active == 2){
        this.awardTitle = '新增获奖表彰'
        this.awardForm.type = 1;
      }else if (this.active == 3){
        this.awardTitle = '新增宣传报道'
        this.awardForm.type = 2;
      }
      this.awardDialog = true
    },
    back() {
      history.back()
    },

    getListAward() {
      this.awardQuery.type = this.active == 2 ? '1' : '2';
      getAwardList(this.awardQuery).then(response => {
        console.log(response)
        this.listAward = response.rows
      })
    },
    clearAwardQuery(){
      this.awardQuery = {
        socialCode: localStorage.getItem('creditCode'),
        pageNum: '1',
        pageSize: '1000',
        type: this.active == 2 ? '1' : '2',
        title:undefined,
        leval:undefined,
        examineYear:undefined
      };
      this.getListAward();
    },
    insertAward() {
      if (this.awardFileList.length == 0) {
        this.$message({
          message: this.active == 2 ? '请上传一张获得表彰照片！' : '请上传一张宣传报道照片！',
          type: 'error'
        })
        return
      }
      this.awardForm.imgUrl = JSON.stringify(this.awardFileList)
      this.awardForm.mpUrl = JSON.stringify(this.awardVideoFileList)
      this.awardForm.socialCode = localStorage.getItem('creditCode')
      this.$refs.awardFormRef.validate(valid => {
        if (valid) {
          if (this.awardForm.id) {
            editAward(this.awardForm).then(response => {
              console.log(response.data)
              if (response.code == 200) {
                this.$message({
                  message: '修改获奖表彰成功！',
                  type: 'success'
                })
                this.awardDialog = false
              }
              this.getListAward()
            })
          } else {
            addAward(this.awardForm).then(response => {
              console.log(response.data)
              if (response.code == 200) {
                this.$message({
                  message: '添加获奖表彰成功！',
                  type: 'success'
                })
                this.awardDialog = false
              }
              this.getListAward()
            })
          }
        } else {
          this.$message({
            message: '请填写完整！',
            type: 'error'
          })
        }
      })
    },
    insertActivity() {
      if (this.imageFileList.length == 0) {
        this.$message({
          message: '请上传一张活动图片！',
          type: 'error'
        })
        return
      }
      let imageUrl = []
      let imageName = []
      for (let i = 0; i < this.imageFileList.length; i++) {
        imageUrl.push(this.imageFileList[i].response.data)
        imageName.push(this.imageFileList[i].name)
      }
      this.activityForm.imgFileUrl = JSON.stringify(imageUrl)
      this.activityForm.imgFileName = JSON.stringify(imageName)
      if (this.fileList != null && this.fileList.length > 0) {
        this.activityForm.mpFileUrl = this.fileList[0].response.data
        this.activityForm.mpFileName = this.fileList[0].name
      }
      this.activityForm.socialCode = localStorage.getItem('creditCode')
      let documentInfos = []
      for (let i = 0; i < this.documentFileList.length; i++) {
        documentInfos.push({
          name: this.documentFileList[i].name,
          url: this.documentFileList[i].response.data
        })
      }
      this.activityForm.wdFileUrl = JSON.stringify(documentInfos)
      console.log(this.activityForm)
      this.$refs.activityFormRef.validate(valid => {
        if (valid) {
          if (this.activityForm.id) {
            editActivity(this.activityForm).then(response => {
              console.log(response.data)
              if (response.code == 200) {
                this.$message({
                  message: '修改活动记录成功！',
                  type: 'success'
                })
                this.selectActivity()
                this.addActivityDialog = false
              }
            })
          } else {
            addHuoDong(this.activityForm).then(response => {
              console.log(response.data)
              if (response.code == 200) {
                this.$message({
                  message: '添加活动记录成功！',
                  type: 'success'
                })
                this.selectActivity()
                this.addActivityDialog = false
              }
            })
          }
        } else {
          this.$message({
            message: '请填写完整！',
            type: 'error'
          })
        }
      })

    },
    addActivity() {
      const viteEnv = wrapperLoadViteEnv(import.meta.env)
      this.uploadUrl = viteEnv.VITE_BASE_URL_API + 'hbsys-system/minio/upload'
      getDictByCode('activityOngoing').then(response => {
        this.activityOngoingOptions = response.data
        this.selectActivity()
      })
      getDictByCode('activityType').then(response => {
        this.activityTypeOptions = response.data
      })
      getDictByCode('activityChargeType').then(response => {
        this.activityChargeTypeOptions = response.data
      })
      //获奖类型rewardType
      //奖励级别rewardLevel
      getDictByCode('rewardLevel').then(response1 => {
        this.awardLevelOptions = response1.data
        this.getListAward()
      })
      getDictByCode('reportRecord').then(response1 => {
        this.awardRecordOptions = response1.data
        this.getListAward()
      })

    },
    getCharge(val) {
      for (let i = 0; i < this.activityChargeTypeOptions.length; i++) {
        if (this.activityChargeTypeOptions[i].id == val) {
          return this.activityChargeTypeOptions[i].name
        }
      }
      return '其他'
    },
    setContent(value) {
      if (value.length > 14) {
        return value.substring(0, 14) + '...'
      } else {
        return value
      }
    },
    handleAwardSuccess(response, file, fileList) {
      this.awardFileList = fileList   // 更新已上传的图片列表
      if (this.awardFiles == null) {
        this.awardFiles = []
      }
      this.awardFiles.push(response.data)
    },
    handleAwardVideoSuccess(response, file, fileList) {
      this.awardVideoFileList = fileList   // 更新已上传的图片列表
      if (this.awardVideoFiles == null) {
        this.awardVideoFiles = []
      }
      this.awardVideoFiles.push(response.data)
    },
    handleAwardVideoBeforeUpload(file){
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },
    handleAwardVideoExceed(files, fileList){
      this.$message.warning('超出文件上传数量')
    },
    handleImageSuccess(response, file, imageFileList) {
      this.imageFileList = imageFileList   // 更新已上传的图片列表
      if (this.imageFiles == null) {
        this.imageFiles = []
      }
      this.imageFiles.push(response.data)
    },
    handleAwardBeforeRemove(file, imageFileList) {
      const index = this.awardFileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.awardFileList.splice(index, 1) // 从数据源中移除该图片
        this.awardFiles.splice(index, 1)
      }
    },
    handleAwardVideoBeforeRemove(file, imageFileList) {
      const index = this.awardVideoFileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.awardVideoFileList.splice(index, 1) // 从数据源中移除该图片
        this.awardVideoFiles.splice(index, 1)
      }
    },
    handleImageBeforeRemove(file, imageFileList) {
      const index = this.imageFileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.imageFileList.splice(index, 1) // 从数据源中移除该图片
        this.imageFiles.splice(index, 1)
      }
    },
    handleImageExceed(imageFiles, imageFileList) {
      this.$message.warning('超出文件上传数量')
    },
    handleAwardExceed(imageFiles, imageFileList) {
      this.$message.warning('超出文件上传数量')
    },
    handleAwardBeforeUpload(file) {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },
    handleImageBeforeUpload(file) {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList   // 更新已上传的图片列表
      if (this.files == null) {
        this.files = []
      }
      this.files.push(response.data)
      console.log(this.files)
    },
    handleBeforeRemove(file, fileList) {
      const index = this.fileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.fileList.splice(index, 1) // 从数据源中移除该图片
        this.files.splice(index, 1)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('超出文件上传数量')
    },
    handleBeforeUpload(file) {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },
    handleDocumentSuccess(response, file, fileList) {
      this.documentFileList = fileList   // 更新已上传的图片列表
      if (this.documentFiles == null) {
        this.documentFiles = []
      }
      this.documentFiles.push(response.data)
      console.log(this.documentFiles)
    },
    handleDocumentBeforeRemove(file, fileList) {
      const index = this.documentFileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.documentFileList.splice(index, 1) // 从数据源中移除该图片
        this.documentFiles.splice(index, 1)
      }
    },
    handleDocumentExceed(files, fileList) {
      this.$message.warning('超出文件上传数量')
    },
    handleDocumentBeforeUpload(file) {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },

    handleReportSuccess(response, file, fileList) {
      this.reportFileList = fileList   // 更新已上传的图片列表
      if (this.reportFiles == null) {
        this.reportFiles = []
      }
      this.reportFiles.push(response.data)
      console.log(this.reportFiles)
    },
    handleReportBeforeRemove(file, fileList) {
      const index = this.reportFileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.reportFileList.splice(index, 1) // 从数据源中移除该图片
        this.reportFiles.splice(index, 1)
      }
    },
    handleReportExceed(files, fileList) {
      this.$message.warning('只能上传5份视频')
    },
    handleReportBeforeUpload(file) {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      if (file.size < 20) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    },

    handleImageClick(images) {
      if (images == null || images == '') {
        this.$message({
          message: '没有活动照片',
          type: 'warning'
        })
        return
      }
      this.srcList = JSON.parse(JSON.parse(images).url)
      console.log(this.srcList)
      this.showImagePreview = true
      // this.dialogTitle = '活动图片'
      // this.activityFileDialog = true
      // this.showUrl = JSON.parse(images).url
    },
    handleCodeClick(id) {
      console.log(id)
      this.dialogTitle = '活动二维码'
      createQrCodeUrl(id).then(response => {
        this.showUrl = response.msg
        this.activityFileDialog = true
      })
    },
    handleVideoClick(videos) {
      console.log(videos)
      if (videos == null || videos == '') {
        this.$message({
          message: '没有活动视频',
          type: 'warning'
        })
        return
      }
      window.open(JSON.parse(videos).url)
    },
    btnBack() {
      history.back()
    },
    radioTypeChange(val){
      this.active = val;
      if(val == 0){
        this.getListReport();
      }else if(val == 1){
        this.selectActivity();
      }else if(val == 2){
        this.listAward = [];
        this.clearAwardQuery();
      }else if(val == 3){
        this.listAward = [];
        this.clearAwardQuery();
      }
    },
    handleDocumentClick(urls) {
      if (urls == null || urls.length < 20) {
        this.$message({
          message: '没有活动文档',
          type: 'warning'
        })
        return
      }
      let documentInfos = JSON.parse(urls)
      for (let i = 0; i < documentInfos.length; i++) {
        console.log(documentInfos[i].url)
        saveAs(documentInfos[i].url, documentInfos[i].name)
      }
    },
    handleRevoke(index) {
      ElMessageBox.confirm(
        '是否撤销此活动记录?',
        '提示', {
          confirmButtonText: '撤销',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          cancelActivity(this.activityData[index].id).then(response => {
            console.log(response)
            this.$message({
              message: '撤销活动成功！',
              type: 'warning'
            })
            this.selectActivity()
          })
        })
        .catch(() => {
        })
    },
    approvalReamrk(remark) {
      ElMessageBox.alert(remark, '驳回原因', {
        confirmButtonText: '确定',
        callback: (action) => {
        }
      })
    },
    handleUpdate(row) {
      if (row.wdFileUrl) {
        const wdFiles = JSON.parse(row.wdFileUrl)
        this.documentFileList = []
        for (let i = 0; i < wdFiles.length; i++) {
          this.documentFileList.push({ name: wdFiles[i].name, response: { code: 200, data: wdFiles[i].url } })
        }
        console.log(this.documentFileList)
      }
      let imageNames = JSON.parse(JSON.parse(row.imgFileUrl).fileName)
      let imageUrls = JSON.parse(JSON.parse(row.imgFileUrl).url)
      console.log(imageNames, imageUrls)
      const images = []
      for (let i = 0; i < imageNames.length; i++) {
        images.push({ name: imageNames[i], response: { code: 200, data: imageUrls[i] } })
      }
      console.log(images)
      this.imageFileList = images
      if (row.mpFileUrl) {
        const videoFiles = JSON.parse(row.mpFileUrl)
        console.log(videoFiles)
        this.fileList = [{ name: videoFiles.fileName, response: { code: 200, data: videoFiles.url } }]
      }

      this.activityForm = row
      this.activityForm.activityType += ''
      this.activityForm.charge += ''
      this.addActivityDialog = true
    },
    clearAddDialog() {
      this.activityForm = {
        activityFormat: '',//活动进行方式
        activityIntroduction: '',//活动简介
        activityName: '',//活动名称
        activityType: '',//($int32)活动类型
        approvalResult: '',//($int32)审批结果(0：未审批；1：审批通过；2审批未通过)
        charge: '',//经费来源
        createBy: '',//
        createTime: '',//($date-time)
        endTime: '',//($date-time)结束时间 yyyy-MM-dd
        expenditure: '',//支出情况
        id: undefined,//
        imgFileUrl: '',//附件路径
        isDeleted: '',//($int32)是否删除：0-否、1-是
        likes: '',//点赞数
        mpFileUrl: '',//附件路径
        participantsNumber: '',//($int32)参与人数
        place: '',//地点
        remark: '',//
        socialCode: '',//社会组织编码
        startTime: '',//($date-time)开始时间 yyyy-MM-dd,
        imgFileName: '',
        mpFileName: '',
        wdFileUrl: ''
      }
      this.fileList = []
      this.imageFileList = []
      this.documentFileList = []
    },
    handleReportDelete(id){
      ElMessageBox.confirm(
        '是否删除此活动报备记录?',
        '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        .then(() => {
          delActivityReport(id).then(response => {
            console.log(response)
            this.$message({
              message: '删除活动报备成功！',
              type: 'warning'
            })
            this.selectActivity()
          })
        })
    },
    handleDelete(index) {
      ElMessageBox.confirm(
        '是否删除此活动记录?',
        '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          deleteActivity(this.activityData[index].id).then(response => {
            console.log(response)
            this.$message({
              message: '删除活动成功！',
              type: 'warning'
            })
            this.selectActivity()
          })
        })
        .catch(() => {

        })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  //--el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  //--el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}

/* 在你的样式表中 */
.el-popover__popper {
  background-color: transparent;
  border: none;
}

.btnbg {
  border-left: 1px solid white;
  margin-left: 30px;
  padding-left: 10px;
  height: 30px;
}

.el-form-item {
  margin-bottom: 0px;
}

.up-btn-box {
  width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;

  &:hover {
    color: #2789EE;
  }

  .upload-title {
    margin-left: 5px;
  }
}

.menuSelected {
  color: #0c7cff;
  font-weight: bold;
  border-bottom: 3px solid #0c7cff;
  font-size: 20px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.menuSelect {
  color: #000000;
  font-size: 20px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.menuSelect:hover {
  color: #0c7cff;
  border-bottom: 1px solid #0c7cff;
  font-size: 20px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
